<template>
	<view class="connect">
		<image  @click="backHome"  src="../../static/inde_png/index_icon_21.png" class="back" mode=""></image>
		<!-- <u-navbar :border-bottom="false" :custom-back="backHome" :background="{background:style.color2}" back-text="首页" title=" "></u-navbar> -->
		<view class="top_bgc"style="padding-top: 85rpx;" :style="background">
			<view class="top_desc">
				<view class="top_desc_left">
					<span class="top_desc_title1">欢迎使用日中商城</span>
					<view class="top_desc_left_bar">
						<view class="top_desc_bar_item">
							<image style="width: 28rpx; height:28rpx;" src="../../static/inde_png/index_icon_1.png" mode=""></image>
							<span class="top_desc_bar_item_title">自营商品</span>
						</view>
						<view class="top_desc_bar_item">
							<image style="width: 28rpx; height:28rpx;" src="../../static/inde_png/index_icon_2.png" mode=""></image>
							<span class="top_desc_bar_item_title">日本直邮</span>
						</view>
						<view class="top_desc_bar_item">
							<image style="width: 28rpx; height:28rpx;" src="../../static/inde_png/index_icon_3.png" mode=""></image>
							<span class="top_desc_bar_item_title">正品保障</span>
						</view>
					</view>
				</view>
				<image style="width: 224rpx; height: 224rpx;" src="../../static/inde_png/index_icon_10.png" mode=""></image>
			</view>
			<view class="" style="padding: 0 30rpx;">
				<view class="nei_box">
					<view class="login_type">
						<view @click="isPhone=true" class="login_btns_type " :class="isPhone?'login_type_left':''">
							验证码登录	
							<image :style="{opacity: isPhone?1:0}" style="width: 56rpx;margin-top: 10rpx; " src="../../static/inde_png/index_icon_12.png" mode="widthFix"></image>
						</view>
						<view @click="isPhone=false" class="login_btns_type " :class="!isPhone?'login_type_right':'login_text_no'">
							密码登录
							<image :style="{opacity: !isPhone?1:0}" style="width: 56rpx;margin-top: 10rpx;" src="../../static/inde_png/index_icon_12.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="input_item">
						<view class="input_item_left">
							手机号/邮箱
						</view>
						<view class="input_box">
							<input  v-model="model" type="text" class=""  placeholder="请输入手机号/邮箱" />
						</view>
						<!-- <u-input v-model="model"  :maxlength="25" placeholder="请输入手机号/邮箱" /> -->
					</view>
					<view v-if="!isPhone" class="input_item ">
						<view class="input_item_left ">
							密码
						</view>
						<view class="input_box">
							<input v-model="code" type="password" class="" :maxlength="11" placeholder="请输入密码" />
						</view>
						
						<!-- <u-input v-model="code" type="password" :maxlength="11" placeholder="请输入密码" /> -->
						
					</view>
					<view v-else class="input_item ">
						<view class="input_item_left ">
							验证码
						</view>
						<view class="input_box">
							<input v-model="sms_captcha" type="number" :maxlength="6" placeholder="请输入验证码"   class="" />
							<u-button @click="getCode('login')" size="mini" :hair-line='false' :disabled="disabled" :ripple="true" shape="square" ripple-bg-color="#ccc">{{btn_text}}</u-button>
						</view>
					</view>
					<view class="xieyi" style="display: flex;" >
						<view @click="isOk = !isOk" class="no" >
							<view v-if="isOk" class="yes"></view>
						</view>
						<span   class="xieyi_text">
						<span  @click="isOk = !isOk">阅读并同意</span> 
						<span style="color: #D4424C;" @click="navToXieyi(1)">《用户服务协议》</span>
						以及
						<span style="color: #D4424C;"  @click="navToXieyi(2)">《登录政策》</span>
						</span>
					</view>
					<view @click="login" class="login_btn">
						立即登录
					</view>
					<view class="othner_btn_text">
						<view class="">
							还没账户？<span @click="navto('/pages/login/zhuCe')" style="color: #D4424C;">去注册</span>
						</view>
						<view class="">
							<!-- 忘记密码 -->
						</view>
					</view>
				</view>
				<!-- <view class="other_login_type">
					<view class="other_login_type_title" style="font-size: 26rpx;">
						——— 其他登录方式 ———
					</view>
					<view @click="getWeChatCode" class="login_btn_wx">
						<view class="wx_logo" >
							<img src="./Wechat.png" alt="" style="width: 48rpx;" />
						</view>
						<view class="wx_connect">微信一键登录</view>
					</view>
				</view> -->
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				style:{},
				isWEchate:false,
				isPhone:true,
				sms_captcha:'',
				phonecode:'',//短信验证码
				noewPhone:'',//新手机号
				phoneSHow:false, // 修改手机号弹出
				wx_info:{}, //微信登录返回用户信息
				isToast:false,
				code:'',
				model:'',
				isOk:false,
				disabled:false,
				disabled1:false,
				btn_text:'获取验证码',
				btn_text1:'获取验证码',
				time : null,
				times : 120 ,//剩余时间
				loginType:1,
				isWixin:false,//是否安装微信
				isSinaweibo:false,//是否安装微博
				background:{}
			}
		},
		onShow() {
			this.isWixin = uni.getStorageSync('isWeixin')
			this.isSinaweibo = uni.getStorageSync('isSinaweibo')
			var style =  uni.getStorageSync('style')
			
			style = JSON.parse(style)
			this.style = style
			this.background = {
				 'background':`
				 radial-gradient(circle at top left, ${this.style.color8} 0%, transparent 60%), 
				 radial-gradient(circle at top right, ${this.style.color9} 0%, transparent 40%),
				 radial-gradient(circle at bottom left, white 0%, transparent 40%),
				 radial-gradient(circle at bottom right, white 0%, transparent 40%)`,
				'backgroundBlendMode': 'screen', /* 混合模式优化颜色过渡 */
			}
			console.log(this.background)
			// #ifdef MP-WEIXIN
				this.isWEchate = true
			// #endif
		},
		methods: {
			navto(url){
				uni.navigateTo({
					url:url
				})
			},
			backHome(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			navToXieyi(type){
				if(type==1){
					// console.log('用户服务协议')
					uni.navigateTo({
						url:'/pages/xieyi/xieyi?title=用户服务协议&id=17'
					})
				}else{
					uni.navigateTo({
						url:'/pages/xieyi/xieyi?title=登录政策&id=15'
					})
				}
			},
			//微信授权
			getWeChatCode() {
				if (!this.isOk) {
					uni.showToast({
						title: '请阅读并同意《用户服务协议》以及《登录政策》',
						icon: 'none'
					})
					this.isToast = true
					setTimeout(() => {
						this.isToast = false
					}, 500)
					return
				}
			 var ua = window.navigator.userAgent.toLowerCase();
			   if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				   // console.log('这个是微信浏览器')
					const appId = 'wx160b3db67708860a'; // 替换为你的公众号AppID
					const redirectUri = encodeURIComponent(window.location.href); // 当前页面的URL，需要进行URL编码
					window.location.href =
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
			   } else {
			       const appId = 'wxe17646442a50807d'; // 替换为你的网站应用AppID
			       const redirectUri = encodeURIComponent(window.location.href); // 当前页面的URL，需要进行URL编码
			       // const redirectUri = encodeURIComponent('https://qiudaoyu.xikawa.net/#/pages/login/login'); // 当前页面的URL，需要进行URL编码
			       window.location.href =`
					https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect
				   `;
			   }
				
			},
			submitPhone(){
				var data = {
					email:this.noewPhone,
					sms_captcha:this.phonecode
				}
				if(data.email == ''){
					uni.showToast({
						title:'请输入手机号',
						icon:'none'
					})
					return
				}
				if(data.sms_captcha == ''){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return
				}
				var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
				if(!emailRegex.test(data.email)){
					uni.showToast({
						title:'请输入正确的手机号',
						icon:'none'
					})
					return
				}
				this.$wqzApi.EmailCheck(data).then(res=>{
					var parmse = {
						data:{
							...this.wx_info,
							user_email:this.noewPhone,
							type: this.loginType, //1微信
						}
					}
					this.$wqzApi.AppLoginBindingEmail(parmse).then(req=>{
						uni.showToast({
							title:'登录成功',
							icon:'success'
						})
						uni.setStorageSync('token' , req.data)
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/my/my'
							})
						},1500)
					}).catch(err=>{
						uni.showToast({
							title:"绑定失败",
							icon:'none'
						})
					})
				}).catch(err=>{
					uni.showToast({
						title:'验证失败',
						icon:'none'
					})
				})
			},
			
			login_wx(){
				if(this.isOk==false){
					uni.showToast({
						title:'请阅读并同意隐私政策/赔付必读',
						icon:"none"
					})
					return
				}
				var that = this
				uni.showLoading({
					title:'登录中'
				})
				var code = ''
				uni.login({
				  success :res => {
					var params = {}
					params.code = res.code
					// console.log(res , '登录信息')
					wx.getUserInfo({
					  success: res => {
					     params.encryptedData = res.encryptedData
					     params.iv = res.iv
						 params.admin_user_id = uni.getStorageSync('admin_user_id')?uni.getStorageSync('admin_user_id'):null
						 that.$wqzApi.login(params).then(res=>{
							 uni.hideLoading()
							 uni.setStorageSync('token' , res.data.token)
							 uni.setStorageSync('isModule' , false)
							 if(res.data.perfect == 0){
								 // uni.showModal({
								 //     title: '提示',
								 //     content: '您还没有完善个人信息,请完善个人信息',
								 //     success: function (res) {
								 //         if (res.confirm) {
								 //             uni.redirectTo({
								 //             	url:'/pages/userInfo/userInfo'
								 //             })
								 //         } else if (res.cancel) {
									// 		uni.redirectTo({
									// 			url:'/pages/index/index'
									// 		})
								 //         }
								 //     }
								 // });
								 uni.hideLoading()
								 uni.showToast({
								 	title:'登录成功'
								 })	
								 setTimeout(()=>{
								 	uni.switchTab({
								 		url:'/pages/self/self'
								 	})
								 },1500)
								 
								 that.getInfo()
							 }else{
								 uni.hideLoading()
								 uni.showToast({
								 	title:'登录成功'
								 })	
								 setTimeout(()=>{
								 	uni.switchTab({
								 		url:'/pages/self/self'
								 	})
								 },1500)
								 
								 that.getInfo()
								 
							 }
							
						 }).catch(err=>{
							 uni.hideLoading()
							 // console.log(err)
						 })
					  },
					  fail:(err)=>{
					  	uni.showToast({
					  		title:err,
					  		icon:'none'
					  	})				  
					  }
					})
				  },
				  fail:(err)=>{
					  uni.showToast({
					  	title:err,
						icon:'none'
					  })
				  }
				})
			},
			login(){
				if(this.model == ''){
					uni.showToast({
						title:'请输入手机号或邮箱',
						icon:'none'
					})
					return
				}
				const phoneRegex = /^[1][123456789][0-9]{9}$/;
				const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
				let isEmail = false
				if (this.model.includes("@")) {
					// 输入的是邮箱
				    isEmail = true
					if(!emailRegex.test(this.model)){
						uni.showToast({
							title:'请输入正确的邮箱',
							icon:'none'
						})
						return
					}
				}else{
					// 输入的是手机号
					if(!phoneRegex.test(this.model)){
						uni.showToast({
							title:'请输入正确的手机号',
							icon:'none'
						})
						return
					}
				}
				if(!this.isOk){
					uni.showToast({
						title:'请阅读并同意《用户服务协议》以及《登录政策》',
						icon:'none'
					})
					this.isToast = true
					setTimeout(()=>{
						this.isToast = false
					},500)
				}else{
					
					var data = {
						"mobile":this.model, //手机号
						"password": this.code, //密码
					}
					if(!this.isPhone){
						if(this.code == ''){
							uni.showToast({
								title:'请输入密码',
								icon:'none'
							})
							return
						}
						this.$gugoApi.pwdLogin(data).then(res=>{
							uni.showToast({
								title:'登录成功',
								icon:'success'
							})
							uni.setStorageSync('token' , res.data.token)
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}).catch(err=>{
							uni.showToast({
								title:err.data.message,
								icon:'none'
							})
							// console.log('错误信息', err)
						})
					}else{
						// 手机号验证码登录
						if(this.sms_captcha == ''){
							uni.showToast({
								title:'请输入验证码',
								icon:'none'
							})
							return
						}
						var data = {
							"mobile": this.model, 
							"sms_code": this.sms_captcha,
						}
						this.$gugoApi.mobileLogin(data).then(res=>{
							uni.showToast({
								title:'登录成功',
								icon:'success'
							})
							uni.setStorageSync('token' , res.data.token)
							setTimeout(()=>{
								uni.navigateBack()
							},1500)
						}).catch(err=>{
							// console.log('错误信息', err)
						})
					}
					
				}
			},
			getCode(type){
				// 获取手机号验证码
				var data = {
					mobile:this.model,
					email:this.model,
					type:type
				}
				if(this.model == ''){
					uni.showToast({
						title:'请输入手机号/邮箱',
						icon:'none'
					})
					return
				}
				var phone = /^[1][123456789][0-9]{9}$/;
				var isEmail = false
				if (this.model.includes("@")) {
					isEmail = true
					const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
					if(!emailRegex.test(this.model)){
						uni.showToast({
							title:'请输入正确的邮箱',
							icon:'none'
						})
						return
					}
				}else{
					if(!phone.test(this.model)){
						uni.showToast({
							title:'请输入正确的手机号',
							icon:'none'
						})
						return
					}
				}
				if(isEmail){
					delete data.mobile
				}else{
					delete data.email
				}
				this.time = setInterval(()=>{
					this.times -= 1
					if(this.times == 0){
						this.disabled = false
						this.btn_text = `获取验证码`
						clearInterval(this.time)
						this.time = null
						this.times = 120
					}else{
						this.disabled = true
						this.btn_text = `${this.times}s后再次获取`
					}
				},1000)
				if(isEmail){
					// 获取邮箱验证码
					this.getEmailCode(data)
				}else{
					// 获取手机号验证码
					this.getPhoneCode(data)
				}
				
			},
			getPhoneCode(data){
				this.$gugoApi.sendSmsCode(data).then(res=>{
					this.time = setInterval(()=>{
						this.times -= 1
						if(this.times == 0){
							this.disabled = false
							this.btn_text = `获取验证码`
							clearInterval(this.time)
							this.time = null
							this.times = 120
						}else{
							this.disabled = true
							this.btn_text = `${this.times}s后再次获取`
						}
					},1000)
				}).catch(err=>{
					uni.showToast({
						title:err.data.message,
						icon:'none'
					})
				})
			},
			getEmailCode(data){
				this.$gugoApi.post_email(data).then(res=>{
					this.time = setInterval(()=>{
						this.times -= 1
						if(this.times == 0){
							this.disabled = false
							this.btn_text = `获取验证码`
							clearInterval(this.time)
							this.time = null
							this.times = 120
						}else{
							this.disabled = true
							this.btn_text = `${this.times}s后再次获取`
						}
					},1000)
				}).catch(err=>{
					uni.showToast({
						title:err.data.message,
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
	@import url('./login.css');
</style>
